import React, { Component } from 'react'
import { connect } from 'react-redux'

import { TabBar } from 'antd-mobile'

import animate from '@h/animate'

import cookbook from '@a/images/cookbook.png'
import cookbookActive from '@a/images/cookbook-active.png'
import menu from '@a/images/menu.png'
import menuActive from '@a/images/menu-active.png'
import location from '@a/images/location.png'
import locationActive from '@a/images/location-active.png'
import more from '@a/images/more.png'
import moreActive from '@a/images/more-active.png'

import { CookBook } from './cookbook/'
import { Category } from './category/'
import Map from './map/Map'
import { More } from './more/'

import { actionCreator as ac } from '@/home/category'

@animate
@connect(
  // (state) => ({}),
  (state) => ({
    checked: state.home.checked,
    selectedTab: state.category.routeInfo.selectedTab
  }),
  dispatch => ({
    changeSelectedTab(selected) {
      dispatch(ac.changeSelectedTab(selected))
    }
  })
)
class Home extends Component {
  state = {
    selectedTab: this.props.selectedTab,
    hidden: false,
    fullScreen: true
  };

  componentDidMount() {
    // console.log(this.props.checked)
  }

  render() {
    const tabItems = [
      <TabBar.Item
        title="美食大全"
        key="cookbook"
        icon={<div style={{
          width: '22px',
          height: '22px',
          background: `url(${cookbook}) center center /  22px 22px no-repeat` }}
        />
        }
        selectedIcon={<div style={{
          width: '22px',
          height: '22px',
          background: `url(${cookbookActive}) center center /  22px 22px no-repeat` }}
        />
        }
        selected={this.state.selectedTab === 'cookbook'}
        badge={1}
        onPress={() => {
          this.setState({
            selectedTab: 'cookbook',
          });
          this.props.changeSelectedTab('cookbook')
        }}
        data-seed="logId"
      >
        <CookBook />
      </TabBar.Item>,
      <TabBar.Item
        icon={
          <div style={{
            width: '22px',
            height: '22px',
            background: `url(${menu}) center center /  21px 21px no-repeat` }}
          />
        }
        selectedIcon={
          <div style={{
            width: '22px',
            height: '22px',
            background: `url(${menuActive}) center center /  21px 21px no-repeat` }}
          />
        }
        title="分类"
        key="category"
        badge={'new'}
        selected={this.state.selectedTab === 'category'}
        onPress={() => {
          this.setState({
            selectedTab: 'category',
          });
          this.props.changeSelectedTab('category')
        }}
        data-seed="logId1"
      >
        <Category />
      </TabBar.Item>,
      <TabBar.Item
        icon={
          <div style={{
            width: '22px',
            height: '22px',
            background: `url(${location}) center center /  22px 22px no-repeat` }}
          />
        }
        selectedIcon={
          <div style={{
            width: '22px',
            height: '22px',
            background: `url(${locationActive}) center center /  22px 22px no-repeat` }}
          />
        }
        title="美食地图"
        key="map"
        dot
        selected={this.state.selectedTab === 'map'}
        onPress={() => {
          this.setState({
            selectedTab: 'map',
          });
          this.props.changeSelectedTab('map')
        }}
      >
        <Map />
      </TabBar.Item>,
      <TabBar.Item
        icon={{ uri: more }}
        selectedIcon={{ uri: moreActive }}
        title="更多"
        key="more"
        selected={this.state.selectedTab === 'more'}
        onPress={() => {
          this.setState({
            selectedTab: 'more',
          });
        }}
      >
        <More />
      </TabBar.Item>
    ]
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#000"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {
            this.props.checked ? tabItems.map(v => v) : tabItems.filter((v, i) => i !== 2)
          }
        </TabBar>
      </div>
    );
  }
}

export default Home
